<template>
	<view class="page-content">
		<u-navbar :autoBack="true" title="皮肤检测" bgColor="transparent" :titleStyle="{color:'#fff'}"></u-navbar>
		<image class="identify" src="/static/img/identify.png" mode=""></image>
		<view class="contentV">
				<!-- 拍摄区域 -->
			<view class="mark"></view>
			<image class="image" v-if="tempImg" mode="widthFix" :src="tempImg" />
			<camera v-if='isAuthCamera' :device-position="devicePosition ?'front': 'back'" class="camera" flash="off"
				resolution='high' />
		</view>
		<view class="containerV">
			<!-- 操作区域 -->
			<view class="bottom">
				<view class="headerV">
					<!-- <view class="top-tips1">{{tipsText}}</view> -->
						<view class="top-tips1">请在自然光下拍摄检测皮肤部位</view>
					<view class="top-tips2">照片只做分析使用，保护您的隐私信息安全</view>
				</view>
				<view class="headerV2">
					<text>点击下方按钮白照识别</text>
				</view>
				<view class="footerV">
					<view style="width: 100%;">
						<view v-if="!tempImg" style="width: 100%;">
							<view class="take-photo-bgV">
								<!-- 图片上传 -->
								<view v-show="true" class="btn-change-upload" @click="handleChooseImage" />
								<!--拍照-->
								<view class="btn-take-photo" @click="handleTakePhotoClick" />
								<!-- 切换镜头 -->
								<view class="btn-change-camera" @click="handleChangeCameraClick" />
							</view>
						</view>
						<view class="confirmV" v-else>
							<view class="btn-cancel" @click="handleCancelClick">
								取消
							</view>
							<view class="btn-ok" @click="handleOkClick">
								确定
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				tipsText: '请将脸部移入框内', // 错误文案提示
				tempImg: '', // 本地图片路径
				cameraEngine: null, // 相机引擎
				devicePosition: true, // 摄像头朝向
				isAuthCamera: true, // 是否拥有相机权限
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() { // 初始化相机引擎
				// #ifdef MP-WEIXIN
				// 1、初始化人脸识别
				wx.initFaceDetect()
				// 2、创建 camera 上下文 CameraContext 对象
				this.cameraEngine = wx.createCameraContext()
				// 3、获取 Camera 实时帧数据
				const listener = this.cameraEngine.onCameraFrame((frame) => {
					if (this.tempImg) {
						return;
					}
					// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
					wx.faceDetect({
						frameBuffer: frame.data,
						width: frame.width,
						height: frame.height,
						enablePoint: true,
						enableConf: true,
						enableAngle: true,
						enableMultiFace: true,
						success: (faceData) => {
							let face = faceData.faceInfo[0]
							if ( faceData.x == -1 || faceData.y == -1) {
								this.tipsText = '检测不到人'
							}
							if (faceData.faceInfo.length > 1) {
								this.tipsText = '请保证只有一个人'
							} else {
								const {
									pitch,
									roll,
									yaw
								} = face.angleArray;
								const standard = 0.5
								if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
									Math.abs(yaw) >= standard) {
									this.tipsText = '请平视摄像头'
								} else if (face.confArray.global <= 0.8 || face.confArray.leftEye <=
									0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 ||
									face.confArray.rightEye <= 0.8) {
									this.tipsText = '请勿遮挡五官'
								} else {
									this.tipsText = '请拍照'
									// 这里可以写自己的逻辑了
								}
							}
						},
						fail: (err) => {
							if (err.x == -1 || err.y == -1) {
								this.tipsText = '检测不到人'
							} else {
								this.tipsText = err.errMsg || '网络错误，请退出页面重试'
							}
						},
					})
				})
				// 5、开始监听帧数据
				listener.start()
				// #endif
			},
			handleChangeCameraClick() { // 切换设备镜头
				this.devicePosition = !this.devicePosition;
			},
			handleChooseImage() { // 图片上传
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						if (res.errMsg === 'chooseImage:ok') {
							this.handleOkClick(res.tempFilePaths[0])
						}
					},
					fail: (res) => {

					},
				});
			},
			handleTakePhotoClick() { // 拍照点击
				if (this.tipsText != "" && this.tipsText != "请拍照") {
					return;
				}
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.camera']) {
							this.isAuthCamera = false
							uni.openSetting({
								success: (res) => {
									if (res.authSetting['scope.camera']) {
										this.isAuthCamera = true;
									}
								}
							})
						}
					}
				})
				this.cameraEngine.takePhoto({
					quality: "high",
					success: ({
						tempImagePath
					}) => {
						this.handleOkClick(tempImagePath)
					}
				})
			},
			async handleOkClick(filePath) { // 点击确定上传
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				// let img = await this.$util.uploadopt.image(filePath,2)
				// uni.$emit('onface',img);
				console.log(filePath,'filePath')
				uni.navigateBack();
			},
			handleCancelClick() { // 点击 - 取消上传
				this.tempImg = ''
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
	}

	.identify {
		width: 100%;
		height: 750rpx;
		margin-top: 250rpx;
		position: fixed;
		/* 绝对定位 */
		top: 0;
		left: 0;
		z-index: 10;
		/* 确保在相机层上方 */
		pointer-events: none;
		/* 避免遮挡相机操作 */
	}

	/* 拍摄区域 */
	.contentV {
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;

		.camera {
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.mark {
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
		}

		.image {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
	}

	.page-content {
		width: 100%;
		height: 100%;

		.containerV {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;

			/* 标题 */
			.headerV {
				width: 90%;
				background-color: rgba(0, 0, 0, 0.3);
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				padding: 20rpx;
				box-sizing: border-box;
				line-height: 50rpx;
				margin: 15rpx auto;
				border-radius: 20rpx;

				.top-tips1 {}

				.top-tips2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
				}
			}

			.headerV2 {
				width: 100%;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				position: relative;

				text {
					font-size: 26rpx;
					border-radius: 8rpx;
					background-color: #fc331e;
					padding: 25rpx 30rpx;

				}

			}

			.headerV2::after {
				content: "";
				position: absolute;
				left: 50%;
				bottom: -15rpx;
				transform: translateX(-50%);
				width: 0;
				height: 0;
				border-left: 18rpx solid transparent;
				border-right: 18rpx solid transparent;
				border-top: 18rpx solid #fc331e;
				/* 箭头颜色 */
			}


			.bottom {
				width: 100%;
				position: fixed;
				z-index: 100;
				bottom: 100rpx;
			}

			/* 操作按钮 */
			.footerV {
				width: 100%;
				flex-grow: 1;
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: center;

				.privacyV {
					padding-top: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					.text {
						font-size: 30rpx;
						color: #1C1C1C;
						text-align: center;
						line-height: 42rpx;
						margin-left: 15rpx;

						text {
							font-size: 30rpx;
							color: #00AAFF;
							text-align: center;
							line-height: 42rpx;
						}
					}
				}

				.bottom-tips-2 {
					margin-top: 20rpx;
					color: #999999;
					text-align: center;
					font-size: 26rpx;
				}

				.take-photo-bgV {
					width: 100%;
					margin-top: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					// 由于左边没有按钮，所以左边要便宜更大，以便是拍照按钮居中
					.btn-take-photo {
						margin: 0rpx 80rpx 0rpx 80rpx;
						width: 130rpx;
						height: 130rpx;
						background: url("/static/img/photo.png") no-repeat;
						background-size: 100% auto;
					}

					.btn-change-upload {
						left: 130rpx;
						width: 90rpx;
						height: 90rpx;
						background: url("/static/img/upload.png") no-repeat;
						background-size: 100% auto;
					}

					.btn-change-camera {
						right: 130rpx;
						width: 90rpx;
						height: 90rpx;
						background: url("/static/img/camera.png") no-repeat;
						background-size: 100% auto;
					}
				}

				.confirmV {
					margin: 200rpx 100rpx 0rpx 100rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.btn-cancel {
						font-size: 32rpx;
						color: #1C1C1C;
					}

					.btn-ok {
						font-size: 32rpx;
						color: #00AAFF;
					}
				}
			}
		}
	}
</style>